<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{
				background-color: #f1f1f1;
			}
			.box{
				height: 200px;
				width: 140px;
				position: relative;
				margin: 250px auto;
				transform-style: preserve-3d;
				transform-origin: center;
				transform: perspective(800px) rotateY(0);
			}
			span{
				position: absolute;
				height: 200px;
				width: 140px;
				box-sizing: border-box;
				background: skyblue;
				text-align: center;
				line-height: 200px;
				color: white;
				border-radius: 5px;
				box-shadow: 0 0 5px #ddd;
				border: 7px solid #fff;
			}
		</style>
	</head>
	<body onselectstart="return false">
		<div class="box">
			
		</div>
		<script>
			let box = document.querySelector('.box')
			let timer = null
			let goTimer = null
			let autoTimer = null
		 	let re = []
		    let x = 0
		    let disX = 0
		   	let n = 0
			let data = [
				'https://i.loli.net/2018/10/18/5bc76252c639d.jpg',
				'https://i.loli.net/2018/10/18/5bc76379c3a2b.jpg',
				'https://i.loli.net/2018/10/18/5bc76379d7315.jpg',
				'https://i.loli.net/2018/10/18/5bc76379dab61.jpg',
				'https://i.loli.net/2018/10/18/5bc76379de919.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e3997.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e4960.jpg',
				'https://i.loli.net/2018/10/18/5bc76379e6cb4.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ebb30.jpg',
				'https://i.loli.net/2018/10/18/5bc76379ec94a.jpg',
				'https://i.loli.net/2018/10/18/5bc76397bf2bf.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c380f.jpg',
				'https://i.loli.net/2018/10/18/5bc76397c57ac.jpg',
			]
		    for(let i = 1;i<13;i++){
		    	let span = document.createElement('span')
				span.style.backgroundImage =`url(${data[i-1]})`
				span.style.backgroundSize = ' 100% 100%'
		    	span.onclick = (e)=>{
		    		e.preventDefault()
		    	}
		    	box.appendChild(span)
		    }
		    window.onload=function (){
		    	let sp = document.querySelectorAll('span')
			    for(let [index,val] of sp.entries()){
			    	val.style.transition = `all 1s ease ${(sp.length - index)*0.1}s`
			    	val.style.transform = `rotateY(${index*(360/sp.length)}deg) translateZ(500px)`
			    }
			    setTimeout(()=>{
			    	autoTimer = setInterval(()=>{
				    	box.style.transform = `perspective(800px) rotateY(${n--/20}deg)`
				    },20)
			    },2000)
			    
			   
			    box.onmousedown = e=>{
			    	clearInterval(autoTimer)
			    	x = e.clientX
			    	goTimer = setInterval(()=>{
			    		re[0] = re[1]
			    	},30)
			    	
			    	document.onmousemove =(e)=>{
						disX = e.clientX - x
			    		re[1] = e.clientX
					    box.style.transform = `perspective(800px) rotateY(${(n+disX)/20}deg)`
				    }
			    	
			    
				    document.onmouseup = ()=>{
				    	clearInterval(timer)
				    	clearInterval(autoTimer)
				    	clearInterval(goTimer)
				    	document.onmousemove = null
				    	document.onmouseup = null
				    	n += disX
				    	
				    	let speed = re[1] - re[0]
				    	
				    	timer = setInterval(res=>{
					    	box.style.transform = `perspective(800px) rotateY(${(n+speed)/20}deg)`
				    		//修改这里
				    		n += speed
				    		speed = speed * 0.9
				    		if(Math.abs(speed) < 1){
				    			speed = 0
				    			clearInterval(timer)
				    			clearInterval(autoTimer)
				    			autoTimer = setInterval(()=>{
					    			box.style.transform = `perspective(800px) rotateY(${n--/20}deg)`

				    			},20)
				    		}
					    },20)
				    }
			    }
		    }
		   
		   	
		   	
		</script>
	</body>
</html>
